<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- <link rel="stylesheet" href="unpkg.com/element-ui@2.13.1/lib/theme-chalk/index.css"> -->
	</head>
	<style>
		.el-row {
			margin-bottom: 20px;

			&:last-child {
				margin-bottom: 0;
			}
		}

		.el-col {
			border-radius: 4px;
		}

		.bg-purple-dark {
			background: #99a9bf;
		}

		.bg-purple {
			background: #d3dce6;
		}

		.bg-purple-light {
			background: #e5e9f2;
		}

		.grid-content {
			border-radius: 4px;
			min-height: 36px;
		}

		.row-bg {
			padding: 10px 0;
			background-color: #f9fafc;
		}
		
		.el-row .grid-content{
		    text-align: center;
			padding-top: 10px;	
			border: 1px solid #D3E4A8;
		}
		#app{
			 margin-top: 80px;
		}
	</style>
	<body>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.13.1/lib/index.js"></script>
		<div id="app">
			<!-- <h2>分栏间隔</h2> -->
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Layout.html" type="warning " target="_self">Layout 布局</el-link>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Container.html" type="success" target="_self">Container 布局容器</el-link>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Container-example.html" type="primary" target="_self">Container 布局容器实例</el-link>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Color-picker.html" type="danger" target="_self">Color 色彩</el-link>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Form.html" type="success " target="_self">Form 表单</el-link>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Message.html" type="warning" target="_self">Message 消息提示</el-link>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Message-box.html" type="danger" target="_self">MessageBox 弹框</el-link>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Dialog.html" type="primary" target="_self">Dialog 对话框</el-link>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Transfer.html" type="warning " target="_self">Transfer 穿梭框</el-link>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content">
						<el-link href="example/Steps.html" type="success " target="_self">Steps 步骤条</el-link>
					</div>
				</el-col>

		</div>
	</body>
	<script>
		new Vue().$mount('#app')
	</script>
</html>
